<template>
<div class="warpper">
	<el-row style="margin-bottom: 10px">
		<el-col :span="24">
			<video class="view" type="video/mp4"   controls
						 :src="route.query.path">
			</video>
		</el-col>
	</el-row>

	<div class="w-1200px" style="margin: 0 auto">
		<AnimeAssemble :chapterList="state.chapterList" :itemId="state.id"></AnimeAssemble>
	</div>


</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import AnimeAssemble from '~/components/assemble/AnimeAssemble.vue'
const route = useRoute();

const  state= reactive({
	chapterList:[]
})
function init() {
	http.get(`chapter/list?itemId=${route.query.itemId}`).then(res =>{
		console.log(res.data)
		state.chapterList = res.data
	})
}
onMounted(()=>{
	init()
})
</script>
<style scoped>
.warpper{
	width: 1200px;
	margin: 0 auto;
}
.view{
	display: block;
	margin: 0 auto;
	width: 1000px;
	height: 420px;
	background-color: #000;
}

</style>
